<template>
    <div style="width: 100%; height: calc(50% - 0.5mm); display: flex; flex-direction: column; justify-content: center;">
        <!-- 工单头部 -->
        <div class="order-header">
            <span></span>
            <h3>上海巴士物资采购管理有限公司送货单</h3>
            <!-- <svg id="barcode"></svg> -->
             <canvas id = "barcode"/>
        </div>

        <!-- 基础信息 -->
        <ul class="order-base">
            <li class="order-li-item" v-for="(item, index) in baseInfo" :key="`base_${index}`">{{ item.text }}
                {{ item.value }}</li>
        </ul>

        <!-- 表格内容 -->
        <table border style="width: 99.5%;" class="order-table">
            <tr class="tr-header">
                <td class="td-item" :class="`td-item-${index + 1}`" v-for="(item, index) in tableHeader"
                    :key="`header_${index}`">{{ item }}</td>
            </tr>

            <!-- 内容部分 -->
            <tr v-for="(row, index) in tableList" :key="`table_list_${index}`" class="tr-list">
                <td class="td-item" :class="`td-item-${coun + 1}`" v-for="(item, coun) in row"
                    :key="`td_item_${index}_${coun}`" :rowspan="index == 0 && coun == 11 ? 6 : ''">{{ item }}</td>
            </tr>

            <!-- 合计 -->
            <tr>
                <td class="td-item">合计金额(元)</td>
                <td class="td-item" colspan="2">{{ totalAmount }}</td>
                <td class="td-item">大写</td>
                <td class="td-item" colspan="7">
                    人民币: {{ convertToChineseCapital(parseFloat(totalAmount)) }}
                </td>
            </tr>
            <!-- 送货单位 -->
            <tr>
                <td class="td-item">送货单位</td>
                <td class="td-item" colspan="2">{{rwoData.PROVIDER_NAME}}</td>
                <td class="td-item" colspan="3">配件产地、型号、单价与网上信息相符(&#9650;)</td>
                <td class="td-item">(是) (否)</td>
                <td class="td-item">用户签收</td>
                <td class="td-item" colspan="4"></td>

            </tr>
        </table>
        <span class="tip-item">备注:①以上栏目必须填写清楚，如有漏写、不填或填写内容不完整，用户可以拒收。②“&#9650;”标记栏目，由用户单位收料人员填写。</span>
        <span class="tip-item tip-item-user">{{ saveCompany }}</span>

    </div>
</template>

<script>
import JsBarcode from 'jsbarcode';
import { roundToDecimals, addroundToDecimals } from "@/utils/mathCalculation.js"

export default {
    props: {
        saveCompany: {
            type: String
        },
        rwoData: {
            type: Object
        }
    },

    data() {
        return {
            baseInfo: {},
            totalAmount: 0,

            tableHeader: [
                '产品编码', '产品名称' , '型号规格', '品牌', '单位', '数量', '单价', '总价', '生产厂商', '交易号', '备注'
            ],
            tableList: []
        }
    },

    methods: {
        convertToChineseCapital(amount) {
            const numberNames = ['零', '壹', '贰', '叁', '肆', '伍', '陆', '柒', '捌', '玖'];
            const unitNames = ['', '拾', '佰', '仟', '万', '亿'];

            let result = '';
            let integerPart = Math.floor(amount);
            let decimalPart = Math.round((amount - integerPart) * 100);

            // 处理整数部分
            if (integerPart === 0) {
                result += '零元';
            } else {
                let integerStr = integerPart.toString();
                let groupCount = Math.ceil(integerStr.length / 4);
                for (let i = 0; i < groupCount; i++) {
                    let group = integerStr.slice(-4);
                    integerStr = integerStr.slice(0, -4);
                    let groupResult = '';
                    for (let j = 0; j < group.length; j++) {
                        if (group[j] !== '0') {
                            groupResult = groupResult + numberNames[Number(group[j])] + unitNames[group.length - 1 - j];
                        } else if (j == group.length - 1) {
                            // groupResult = groupResult + numberNames[Number(group[j])] + unitNames[group.length - 1 - j] ;
                            groupResult = groupResult + unitNames[group.length - 1 - j];

                        } else {
                            if (groupResult.length > 0 && groupResult[0] !== '零') {
                                groupResult = groupResult + '零';
                            }
                        }

                    }
                    if (groupResult !== '') {
                        result = groupResult + (i > 0 ? unitNames[4 + i - 1] : '') + result;
                    }

                }
                result += '元';
            }

            // 处理小数部分
            if (decimalPart > 0) {
                result += numberNames[Math.floor(decimalPart / 10)] + '角' + numberNames[decimalPart % 10] + '分';
            } else {
                result += '整';
            }

            return result;
        }
    },

    mounted() {
        // 抬头内容
        this.baseInfo = {
            receivingUnit: { text: "收货单位(用户) :", value: `${this.rwoData.WAREHOUSENAME}` },
            no_1: { text: "", value: "" },
            deliveryAddress: { text: "送货地址 :", value: `${this.rwoData.GS_DELIVER_GOODS_ADDR}` },
            outboundOrderNumber: { text: "出库单号 :", value: "" },
            deliveryDate: { text: "订单要求送货日期 :", value: `${this.rwoData.GS_DELIVER_GOODS_DATE}` },
            actualDeliveryDate: { text: "实际送货日期 :", value: "" },
            orderCreateDate: {
                text: "订单创建日期 :", value:  this.rwoData.createdTime.split(" ")[0]
            }
        }

        // 列表内容
        const temps_list = Array.from({ length: 6 }, () => Array(10).fill(''));
        this.rwoData.lists.forEach((item, index) => {
            temps_list[index][0] = item.GS_CONCENTRICITY_ID;
            temps_list[index][1] = item.PRODUCTNAME;
            temps_list[index][2] = item.MODEL;
            temps_list[index][3] = item.PRODUCT_BRAND;
            temps_list[index][4] = item.productUnit;
            temps_list[index][5] = item.actSendCount;
            temps_list[index][6] = item.GS_GOODS_UNITPRICE;
            temps_list[index][7] = roundToDecimals(item.GS_GOODS_UNITPRICE * item.actSendCount, 2);
            temps_list[index][8] = item.manufaturer;
            temps_list[index][9] = item.id;


            // 统计

            // this.totalAmount = roundToDecimals(parseFloat(roundToDecimals(item.GS_GOODS_UNITPRICE * item.actSendCount, 2)) + parseFloat(this.totalAmount), 2)
            this.totalAmount = addroundToDecimals(this.totalAmount, roundToDecimals(item.GS_GOODS_UNITPRICE * item.actSendCount, 2))
            // this.totalAmount = `911.00`
        })
        this.totalAmount = roundToDecimals(parseFloat(this.totalAmount), 2)
        this.tableList = temps_list;




        JsBarcode('#barcode', this.rwoData.sendOrderId, {
            format: 'CODE128',
            lineColor: '#000',
            width: 1.8,
            height: 40,
        });
    }
}
</script>

<style scope lang="scss">
.order-header {
    overflow: hidden;
    display: flex;
    justify-content: space-between;

    h3 {
        // font-size: 20px;
        font-size: 5mm;
        font-weight: bold;
    }
}

.order-base {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;

    .order-li-item {
        font-size: 3.4mm;
        height: 5.5mm;
        line-height: 5.5mm;

    }
}

.order-table {
    border-collapse: collapse;
}

.tr-header {
    .td-item {
        font-weight: bold;
    }
}

.tr-list {
    .td-item-5 {
        // font-size: 16px;
        color: #000;
    }
}


.td-item {
    // font-size: 12px;
    font-size: 3.5mm;
    text-align: center;
    word-break: break-all;
    // padding: 6px;
    padding: 0.7mm 0.5mm 0.7mm 0.5mm;
    height: 6.5mm;
    box-sizing: border-box;
}

// .td-item-1 {
//     width: 120px;
// }

// .td-item-3 {
//     width: 100px;
// }

// .td-item-4 {
//     width: 100px;
// }

// .td-item-5 {
//     width: 60px;
// }

// .td-item-6 {
//     width: 70px;
// }

// .td-item-7 {
//     width: 90px;
// }

// .td-item-8 {
//     width: 120px;
// }

// .td-item-9 {
//     width: 180px;
// }

// .td-item-10 {
//     width: 100px;
// }


.tip-item {
    // font-size: 12px;
    font-size: 2.5mm;
    display: inline-block;
    // height: 26px;
    height: 3mm;
    line-height: 5mm;
    // line-height: 26px;
}

.tip-item-user {
    display: block;
    text-align: right;
}
</style>
